﻿<!--
 * @Author: your name
 * @Date: 2021-01-14 14:00:57
 * @LastEditTime: 2021-01-14 14:51:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Canvas冬季下雪场景特效\index.html
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>❉html+css+js❉ 绘制冬季下雪3D相册</title>
    <script src="js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style1.css" />
    <style>
      html,
      body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      .container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <audio autoplay="autopaly">
      <source src="renxi.mp3" type="audio/mp3" />
    </audio>
    <div class="box">
      <ul class="minbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ol class="maxbox">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <div id="contents">
      <canvas id="canvas">This browser cannot use a canvas.</canvas>
    </div>

    <script src="js/script.js"></script>

    <div
      style="
        text-align: center;
        margin: 50px 0;
        font: normal 14px/24px 'MicroSoft YaHei';
      "
    ></div>
    <script>
      function init() {
        if (
          navigator.userAgent.match(
            /(phone|pod|iPhone|iPod|ios|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          )
        ) {
          var box = document.querySelectorAll(".box")[0];
          box.style.marginTop = "65%";
          box.style.marginLeft = "40%";
        }
      }
      $(function () {
        init();
      });
    </script>
  </body>
</html>
